<template>
    <div>
        
        <div class="food">
            <div class="food_intro">
                <van-card :desc="data.food.intro" :title="data.food.foodname" :thumb="getImg(data.food.pic)">
                    <template #price>
                        <div class="van-card__price">
                            <div>
                                <span class="van-card__price-currency">¥</span>
                                <span class="van-card__price-integer">{{data.food.price}}</span>
                                <span class="van-card__price-decimal">.00</span>
                            </div>
                        </div>
                    </template>
                </van-card>
            </div>
            <div class="num">
                <p>数量</p>
                <div class="num_btn">
                    <van-button icon="minus" type="primary" size="small" @click="sub" />
                    <span>{{ data.num }}</span>
                    <van-button icon="plus" type="primary" size="small" @click="add" />
                </div>
            </div>
        </div>
        <div class="time">
            <div><p>送达时间:{{ time.currentTime.join(':') }}</p></div>
            <div class="addTime">
                <van-button type="danger" @click="showPopup">选择时间</van-button>
            </div>
        </div>
        <div>
            <van-submit-bar :price="sum * 100" button-text="购买" @submit="onSubmit" />
        </div>
        <van-popup v-model:show="time.show" position="bottom" :style="{ height: '30%' }">
            <div>
                <van-time-picker v-model="time.currentTime" title="选择时间" :min-hour="10" :max-hour="20" :min-minute="30" :max-minute="40" @confirm="putt()" />
            </div>
        </van-popup>
    </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useCounterStore } from '../stores/counter';
import { getFoodsDetailApi, insertOrderApi } from '../api/index';
import { showSuccessToast, showFailToast } from 'vant';
const route = useRoute();
const router = useRouter();
const store = useCounterStore();
const data = reactive({
    num: 1,
    food: {},
});
const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
const showPopup = () => {time.show = true;};
const putt = () => {time.show = false;};
const add = () => {data.num++;};
const sub = () => {
    if (data.num > 1)
        data.num--;
};
const sum = computed(() => {
    return data.food.price * data.num;
});
const getFoodDetail = async e => {
    const res = await getFoodsDetailApi(e);
    data.food = res;
};
const insertOrder = async e => {
    const res = await insertOrderApi(e);
    if (res.success === '0') {
        showFailToast('购买失败');
    } if (res.success === '1') {
        showSuccessToast('购买 成功');
    }
};
onMounted(() => {
    getFoodDetail(route.query.foodId);
});
const time = reactive({
    show: false,
    currentTime: ['12', '00'],
});
const onSubmit = () => {
    insertOrder({
        userId: store.userId,
        foodId: route.query.foodId,
        num: data.num,
        sum: sum.value,
        suggesttime: time.currentTime.join(':'),
    });
};
const onClickLeft = () => {
    router.back()
};
</script>

<style scoped>
.van-card__price{
    color: #f00;
}

.van-card__price-integer{
    font-size: 20px;
}
:deep(.van-card__thumb){
    width: 120px;
    height: 120px;
}
:deep(.van-card__title){
    font-size: 20px;
    line-height: 20px;
}
.van-button--normal{
    font-size: 20px;
}
.num{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.num p{
    font-size: 20px;
    margin-left: 10px;;
}
.time{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.time p{
    font-size: 20px;
    margin-left: 10px;;
}
.num_btn{
    margin-right: 15px;
    display: flex;
    align-items: center;
}
.van-card{
    background-color: #fff;
}
</style>